<template>
  <div id="">
    <ul class="memberMenu">
      <li v-for="menu in memberMenu" :key="menu.key">
        <a @click="gotoLinkName(menu.linkName)">
          <img :src="menu.iconUrl" alt="">
          <p>{{menu.name}}</p>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    memberMenu:[{
      iconUrl:require('@/assets/memberImage/wallet_icon.png'),
      name:'我的钱包',
      linkName:'myWallet'
    },{
      iconUrl:require('@/assets/memberImage/activity_icon.png'),
      name:'我的活动',
      linkName:'myActivity'
    },{
      iconUrl:require('@/assets/memberImage/resume_icon.png'),
      name:'个人设置',
      linkName:'curriculumVitae'
    },{
      iconUrl:require('@/assets/memberImage/order_icon.png'),
      name:'我的预约',
      linkName:'myAppointment'
    },{
      iconUrl:require('@/assets/memberImage/serve_icon.png'),
      name:'我的服务',
      linkName:'myService'
    },{
      iconUrl:require('@/assets/memberImage/partner_icon.png'),
      name:'我的朋友',
      linkName:'myFriends'
    },{
      iconUrl:require('@/assets/memberImage/group_icon.png'),
      name:'我的群组',
      linkName:'myGroup'
    },{
      iconUrl:require('@/assets/memberImage/trip_icon.png'),
      name:'我的行程',
      linkName:'myScheduling'
    },{
      iconUrl:require('@/assets/memberImage/interest_icon.png'),
      name:'兴趣爱好',
      linkName:'myInterest'
    },{
      iconUrl:require('@/assets/memberImage/shop_icon.png'),
      name:'商城',
      linkName:'mallIndex'
    },{
      iconUrl:require('@/assets/memberImage/address_icon.png'),
      name:'地址管理',
      linkName:'addressManage'
    },]
  }),
  methods: {
    gotoLinkName(linkName) {
      console.log(linkName);
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      if(!xlyd_loginInfo) {
        this.messageBox.confirm('请先登录').then(active=>{
          this.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        });
        return false;
      }
      this.$router.push({name:linkName});
    }
  }
}
</script>
<style lang="scss" scoped>
.memberMenu{
  @include flex;
  flex-wrap: wrap;
  li{
    width: 33%;
    text-align: center;
    border-bottom: 1px solid $borderColor;
    margin-bottom: 20px;
    a{
      display: block;
      margin-bottom: 20px;
      border-right: 1px solid #eee;
      img{
        height: 35px;
      }
      p{
        margin-top: 10px;
      }
    }
    &:nth-child(3n) span,&:last-child span{
      border:none;
    }
    &:nth-last-child(2),&:last-child{
      border-bottom: none;
    }
  }
}
</style>
